<template>
	<view class="content poRel">
		<swiper class="wid100" style="height: 350rpx;" circular :indicator-dots="true"
		:autoplay="true" indicator-active-color	="#77CCF3">
			<swiper-item class="wh100" v-for="(item,index) in lunbouList" :key="index">
				<image :src="url+item.imgurl" class="wh100"></image>
			</swiper-item>
		</swiper>
		<view class="mar-top30 wid90 mar bacFFF borRad40" style="height: 110rpx;">
			<view class="wid90 mar hei100 dis disAl disJuB" @click="tiaozhuan('/pages/index/sousuo')">
				<view style="color: #767778;">请输入新闻关键词</view>
				<view class="dis disAl disJuC " style="width: 20%;">
					<image src="../../static/index/sousuo.png" style="width: 55rpx;height: 59rpx;"></image>
				</view>
			</view>
		</view>
		<view class="mar-top30 wid95 mar bacFFF borRad20" v-if="video_switch == 1">
			<view style="height: 20rpx;"></view>
			<view class="wid90 mar hei80 dis disAl">
				<view class="foSi35 mar-right10" style="font-weight: 600;">小课堂</view>
				<view style="font-weight: 600;width: 170rpx;height: 50rpx;
					background: url('../../static/index/juxing.png');box-sizing: border-box;background-size: 100% 100%;"
					class="dis disAl disJuC foSi30 coFFF" >教学</view>
					<!-- <view class="" @click="login">
						登录
					</view>
					<view class="" @click="xd">
						检测下单
					</view>
					<view class="" @click="dd">
						我的订单
					</view>
					<view class="" @click="gr">
						个人中心
					</view> -->
			</view>
			<view class="wid90 mar hei60 dis mar-top20 foSi30 cc" style="font-weight: 600;">
				<view class="hei100 dis disAl" :class="index > 0 ? 'ccd' : ''" v-for="(item,index) in fenlei" :key="index" @click="ketang(index)" 
				:style="peixin == index?'border-bottom: 6rpx solid #1262DB;color: #1262DB;':''">{{item.name}}</view>
			</view>
			<view class="wid95 mar mar-top30 xhx"></view>
			<scroll-view class="wid90 mar mar-top20" scroll-x="true" style="white-space: nowrap;height: 310rpx;">
				<view v-for="(item,index) in voide" :key="index" @click="tiaozhuan('/pages/video/video?id='+item.id)"
					class="mar-right30 borRad20" style="background-color: #EEEEEE;display: inline-block;width: 250rpx;">
					<image :src="url+item.coverimg" class="borRad20" style="height: 230rpx;width: 250rpx;"></image>
					<view class="wid90 mar textCen overflowHidden" style="font-weight: 600;">{{item.title}}</view>
					<view style="height: 10rpx;"></view>
				</view>
			</scroll-view>
			<view style="height: 20rpx;"></view>
		</view>
		<view class="mar-top20 wid95 mar bacFFF borRad20">
			<view style="height: 20rpx;"></view>
			<view class="wid90 mar hei60 dis disJuB foSi30">
				<view class="dis disAl " style="font-weight: 600;border-bottom: 6rpx solid #1262DB;color: #1262DB;">健康头条</view>
			</view>
			<view style="height: 20rpx;"></view>
			<view class="wid95 mar xhx"></view>
			<view class="wid95 mar" v-for="(item,index) in list" :key="index" @click="tiaozhuan('/pages/video/particulars?id='+item.id)">
				<view class="wid90 mar dis disAl" style="padding: 20rpx 0;">
					<view style="width: 40%;height: 125rpx;">
						<image :src="url+item.coverimg" class="hei100" style="width: 190rpx;"></image>
					</view>
					<view style="width: 60%;">
						<view style="font-weight: 600;" class="foSi30">{{item.title}}</view>
						<view style="color: #8C8C8C;" class="foSi25 mar-top10 webkitLineClamp">{{item.subtitle}}</view>
						<view class="wid100 dis foSi20 mar-top20" style="color: #8C8C8C;justify-content: flex-end;">
							<view>{{item.createtime}} 来源于</view>
							<view class="mar-left10" style="color: #1262DB;">{{item.source}}</view>
						</view>
					</view>
				</view>
				<view class="xhx"></view>
			</view>
			<view v-if="jiazai == 0" class="hei80 wid100 dis disAl disJuC foSi25" style="color: #838383;">上拉刷新更多</view>
			<view v-if="jiazai == 1" class="hei80 wid100 dis disAl disJuC foSi25" style="color: #838383;">正在加载....</view>
			<view v-if="jiazai == 2" class="hei80 wid100 dis disAl disJuC foSi25" style="color: #838383;">暂无更多信息</view>
		</view>
		<view style="height: 50rpx;"></view>
		<image src="../../static/index/zhiding.png" @click="dingbu"
			style="width: 71rpx;height: 71rpx;position: fixed;right: 30rpx;bottom: 100rpx;"></image>
			
			
		<view class="" style="height: 200rpx;">
			
		</view>
		<view class="db" style="position: fixed;bottom: 0px;left:0px;right:0px;width:95%;display: flex;align-items: center;justify-content: space-around;padding:20rpx;background-color: #fff;border-top: 1px solid #ccc;padding-bottom: 30rpx;">
			<view class="" style="display: flex;flex-direction: column;align-items: center;">
				<view class="">
					<image src="../../static/index/zhishiku1.png" style="width: 60rpx;height: 60rpx;" mode=""></image>
				</view>
				<view class="" style="font-size: 20rpx;color: #1262DB;">
					乐友康健
				</view>
			</view>
			<!-- <view class="" @click="tz">
				<view class="">
					<image src="../../static/index/zhenliao.png" style="width: 60rpx;height: 60rpx;" mode=""></image>
				</view>
				<view class="" style="font-size: 20rpx;">
					商城
				</view>
			</view> -->
			<view class="" @click="swwd()">
				<view class="">
					<image src="../../static/index/fuwu.png" style="width: 60rpx;height: 60rpx;" mode=""></image>
				</view>
				<view class="" style="font-size: 20rpx;">
					服务方
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				peixin: 0,
				jiazai: 0,
				page: 0,
				list: [],
				voide: [],
				lunbouList: [],
				fenlei: [],
				url: this.global.url,
				video_switch: 0,
			}
		},
		onLoad() {
			uni.hideTabBar()
			this.getIndex()
			this.lunbou()
			this.getfic()
			this.getList()
			uni.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"]
			})
		},
		onShareAppMessage(res) {
			let that = this;
			return {
				title: '乐优康健',
				path: '/pages/index/index'
			};
		},
		// 分享到朋友圈
		onShareTimeline() {
			let that = this;
			return {
				title: '乐优康健',
				path: '/pages/index/index'
			};
		},
		onReachBottom(){
			if(this.jiazai == 0){
				this.jiazai = 1
				this.page++
				this.getList()
			}
		},
		methods: {
			tz(){
				uni.navigateToMiniProgram({
				    appId: 'wx83aebf162ebea54d', // 小程序的appid
				    path: 'zofui_sales/pages/index/index', // 打开的页面路径，可选
				    extraData: {
				        // 需要传递给小程序的数据，可选
				    },
				    success(res) {
				        // 打开成功的回调，可选
				        console.log('打开成功');
				    },
				    fail(err) {
				        // 打开失败的回调，可选
				        console.log('打开失败', err);
				    }
				});
			},
			swwd(){
				uni.switchTab({
					url:'/pages/login/login'
				})
			},
			login(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			
			xd(){
				uni.navigateTo({
					url:'/pages/checkorder/checkorder'
				})
			},
			dd(){
				uni.navigateTo({
					url:'/pages/checkorder/myorder'
				})
			},
			gr(){
				uni.navigateTo({
					url:'/pages/hz_my/hz_my'
				})
			},
			tiaozhuan(url){
				uni.navigateTo({
					url: url
				});
			},
			ketang(index){
				if(this.peixin != index){
					this.peixin = index
					this.getVoide()
				}
			},
			dingbu(){
				uni.pageScrollTo({
					scrollTop:0,   // 滚动到页面的目标位置  这个是滚动到顶部, 0 
					duration:300  // 滚动动画的时长
				})
			},
			lunbou(){
				var that = this
				uni.request({
				    url: that.global.url + 'api/banner/index',
				    method: "POST",
					header: {
						'token': uni.getStorageSync('token')
					},
				    data: {},
				    success(res) {
				        let result = res.data
				        if(result.code == 1){
							that.lunbouList = result.data
						}else{
				           uni.showToast({
				           	title: result.msg,
				           	icon: 'error'
				           })
				        }
				       
				    }
				})
			},
			getIndex(){
				var that = this
				uni.request({
				    url: that.global.url + 'api/index/index',
				    method: "POST",
					header: {
						'token': uni.getStorageSync('token')
					},
				    data: {},
				    success(res) {
				        let result = res.data
				        if(result.code == 1){
							that.video_switch = result.data.video_switch
						}else{
				           uni.showToast({
				           	title: result.msg,
				           	icon: 'error'
				           })
				        }
				       
				    }
				})
			},
			getfic(){
				var that = this
				uni.request({
				    url: that.global.url + 'api/classroom/getfic',
				    method: "POST",
					header: {
						'token': uni.getStorageSync('token')
					},
				    data: {},
				    success(res) {
				        let result = res.data
				        if(result.code == 1){
							that.fenlei = result.data
							that.getVoide()
						}else{
				           uni.showToast({
				           	title: result.msg,
				           	icon: 'error'
				           })
				        }
				       
				    }
				})
			},
			getVoide(){
				var that = this
				uni.request({
				    url: that.global.url + 'api/classroom/index',
				    method: "POST",
					header: {
						'token': uni.getStorageSync('token')
					},
				    data: {
						fic: this.fenlei[this.peixin].id,
						type: 1,
					},
				    success(res) {
				        let result = res.data
				        if(result.code == 1){
							that.voide = result.data.data
						}else{
				           uni.showToast({
				           	title: result.msg,
				           	icon: 'error'
				           })
				        }
				       
				    }
				})
			},
			getList(){
				var that = this
				uni.request({
				    url: that.global.url + 'api/classroom/index',
				    method: "POST",
					header: {
						'token': uni.getStorageSync('token')
					},
				    data: {
						page: this.page,
						type: 2,
					},
				    success(res) {
				        let result = res.data
				        if(result.code == 1){
							if(that.page == 0){
								that.list = result.data.data
							}else{
								that.list = that.list.concat(result.data.data)
							}
							if(result.data.last_page > that.page+1){
								that.jiazai = 0
							}else{
								that.jiazai = 2
							}
						}else{
				           uni.showToast({
				           	title: result.msg,
				           	icon: 'error'
				           })
				        }
				       
				    }
				})
			}
		}
	}
</script>

<style>
	.content {
		min-height: 100vh;
		background-color: #F0F0F0;
	}
	.cc:first-child{
		margin-left: 0rpx !important;
	}
	.ccd{
		margin-left: 70rpx;
	}
</style>
